<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/register.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#64748B',
                        accent: '#10B981',
                        danger: '#EF4444',
                        dark: '#1D2129',
                        neutral: {
                            100: '#F8FAFC',
                            200: '#E2E8F0',
                            700: '#334155',
                            800: '#1E293B',
                            900: '#0F172A'
                        },
                        surface: {
                    50: '#f8fafc',
                    100: '#f1f5f9',
                    200: '#e2e8f0',
                },
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'elegant': '0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.02)',
                        'card': '0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
                        'soft': '0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary focus:outline-none;
                @apply bg-[#f8fafc] border-[#e2e8f0];
            }
            .btn-hover {
                @apply hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-300;
            }
            .form-gradient {
    background: linear-gradient(135deg, #92b1d3 0%, #f3f4f6 100%);
    border: 1px solid rgba(229, 231, 235, 0.8);
}

            .modal-appear {
                animation: fadeIn 0.3s ease-out forwards;
            }
            .modal-content-appear {
                animation: slideUp 0.3s ease-out forwards;
            }
            @keyframes fadeIn {
                from { opacity: 0; }
                to { opacity: 1; }
            }
            @keyframes slideUp {
                from { transform: translateY(20px); opacity: 0; }
                to { transform: translateY(0); opacity: 1; }
            }
            .form-label {
                @apply flex items-center text-sm font-medium text-neutral-700 mb-2 whitespace-nowrap;
            }
            .form-label-icon {
                @apply w-5 text-center mr-2;
            }
        }
        body {
            background-image: url('/images/background.jpg'); /* 假设图片放在public/images目录下 */
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            z-index: -1;  /* 确保低于内容层级 */
            }

            body::before {
                display:none;
            }
    </style>
    <style>
        /* 双列布局优化 */
        .form-row {
            display: flex;
            flex-wrap: wrap;
            gap: 1.5rem; /* 列间距 */
            margin: 0 -0.75rem; /* 负边距抵消内边距 */
        }
        .form-col {
            flex: 1;
            min-width: calc(50% - 1.5rem); /* 计算实际列宽 */
            padding: 0 0.75rem; /* 列内边距 */
        }
        @media (max-width: 768px) {
            .form-row {
                flex-direction: column;
                gap: 1.25rem;
            }
            .form-col {
                min-width: 100%;
            }
        }
        /* 确保页面有足够空间 */
        .form-container {
            max-height: calc(100vh - 180px);
            overflow-y: auto;
        }
    </style>
</head>
<body class="min-h-screen font-inter text-neutral-800">
    <header class="bg-primary text-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-book-open text-white text-2xl"></i>
                <h1 class="text-xl font-bold text-white">软课程管理平台</h1>
            </div>
            <nav>
                <ul class="flex space-x-6">
                    <li><a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">返回</a></li>
                </ul>
            </nav>
            <div class="flex items-center space-x-3">
                <div id="username-display" class="font-medium text-white"></div>
                <a href="#" class="text-white hover:text-neutral-200 transition-colors duration-300">
                    <i class="fa-solid fa-user-circle text-xl"></i>
                </a>
            </div>
        </div>
    </header>
    <div class="flex flex-col items-center justify-center min-h-screen px-4 py-6 sm:py-8">
        <!-- 装饰性背景元素 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
            <div class="absolute -top-32 -left-32 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
            <div class="absolute top-1/4 right-0 w-48 h-48 bg-accent/5 rounded-full blur-3xl"></div>
            <div class="absolute bottom-0 left-1/4 w-56 h-56 bg-secondary/5 rounded-full blur-3xl"></div>
        </div>
        
        <!-- 主容器 -->
        <div class="relative z-10 w-full max-w-3xl">
            <!-- 顶部Logo -->
            <div class="text-center mb-6 sm:mb-8">
                <div class="inline-flex items-center justify-center w-12 h-12 sm:w-16 h-16 rounded-full bg-primary/10 mb-2 sm:mb-4">
                    <i class="fa-solid fa-user-plus text-primary text-xl sm:text-2xl"></i>
                </div>
                <h1 class="text-xl sm:text-[clamp(1.75rem,5vw,2.5rem)] font-bold text-white mb-1 sm:mb-2">用户注册</h1>
                <p class="text-white text-sm">请填写以下信息完成注册</p>
            </div>
            
            <!-- 表单卡片 -->
            <div class="form-gradient rounded-xl sm:rounded-2xl shadow-soft p-5 sm:p-8 border border-neutral-200/50 form-container">
                <h2 class="text-lg sm:text-xl font-bold text-neutral-900 mb-4 sm:mb-6">用户注册</h2>
                
                <!-- 双列布局行 -->
                <div class="form-row mb-4 sm:mb-6">
                    <!-- 用户名 -->
                    <div class="form-col">
                        <label for="regUsername" class="form-label">
                            <i class="fa-solid fa-user form-label-icon"></i>用户名
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                                <i class="fa-solid fa-at"></i>
                            </span>
                            <input type="text" id="regUsername" placeholder="字母和数字，3-10位" 
                                class="w-full pl-10 pr-4 py-2.5 sm:py-3 rounded-lg border border-neutral-300 input-focus transition-all duration-200">
                        </div>
                    </div>
                    
                    <!-- 邮箱 -->
                    <div class="form-col">
                        <label for="regEmail" class="form-label">
                            <i class="fa-solid fa-envelope form-label-icon"></i>邮箱
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                                <i class="fa-solid fa-envelope"></i>
                            </span>
                            <input type="email" id="regEmail" placeholder="请输入邮箱" 
                                class="w-full pl-10 pr-4 py-2.5 sm:py-3 rounded-lg border border-neutral-300 input-focus transition-all duration-200">
                        </div>
                    </div>
                </div>

                <!-- 密码双列行 -->
                <div class="form-row mb-4 sm:mb-6">
                    <!-- 密码 -->
                    <div class="form-col">
                        <label for="regPassword" class="form-label">
                            <i class="fa-solid fa-lock form-label-icon"></i>密码
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                                <i class="fa-solid fa-lock"></i>
                            </span>
                            <input type="password" id="regPassword" placeholder="包含数字、大小写字母，≥10位" 
                                class="w-full pl-10 pr-10 py-2.5 sm:py-3 rounded-lg border border-neutral-300 input-focus transition-all duration-200">
                        </div>
                    </div>
                    
                    <!-- 确认密码 -->
                    <div class="form-col">
                        <label for="regConfirmPassword" class="form-label">
                            <i class="fa-solid fa-lock form-label-icon"></i>确认密码
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                                <i class="fa-solid fa-lock"></i>
                            </span>
                            <input type="password" id="regConfirmPassword" placeholder="再次输入密码" 
                                class="w-full pl-10 pr-4 py-2.5 sm:py-3 rounded-lg border border-neutral-300 input-focus transition-all duration-200">
                        </div>
                    </div>
                </div>

                <!-- 姓名/学工号双列行 -->
                <div class="form-row mb-4 sm:mb-6">
                    <!-- 姓名 -->
                    <div class="form-col">
                        <label for="regName" class="form-label">
                            <i class="fa-solid fa-signature form-label-icon"></i>姓名
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                                <i class="fa-solid fa-user"></i>
                            </span>
                            <input type="text" id="regName" placeholder="请输入姓名" 
                                class="w-full pl-10 pr-4 py-2.5 sm:py-3 rounded-lg border border-neutral-300 input-focus transition-all duration-200">
                        </div>
                    </div>
                    
                    <!-- 学工号 -->
                    <div class="form-col">
                        <label for="regStudentId" class="form-label">
                            <i class="fa-solid fa-id-card form-label-icon"></i>学工号
                        </label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                                <i class="fa-solid fa-id-card"></i>
                            </span>
                            <input type="text" id="regStudentId" placeholder="请输入学工号" 
                                class="w-full pl-10 pr-4 py-2.5 sm:py-3 rounded-lg border border-neutral-300 input-focus transition-all duration-200">
                        </div>
                    </div>
                </div>

                <!-- 身份字段（单独一行） -->
                <div class="mb-6">
                    <label for="regRole" class="form-label">
                        <i class="fa-solid fa-user-tie form-label-icon"></i>身份
                    </label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-500">
                            <i class="fa-solid fa-user-tag"></i>
                        </span>
                        <select id="regRole" 
                            class="w-full pl-10 pr-10 py-2.5 sm:py-3 rounded-lg border border-neutral-300 input-focus transition-all duration-200 appearance-none bg-white">
                            <option value="教师">教师</option>
                            <option value="助教">助教</option>
                            <option value="学生">学生</option>
                        </select>
                        <span class="absolute inset-y-0 right-0 flex items-center pr-3 text-neutral-500 pointer-events-none">
                            <i class="fa-solid fa-chevron-down"></i>
                        </span>
                    </div>
                </div>

                <button onclick="validateAndOpenConfirmModal()" 
                    class="w-full mt-4 sm:mt-6 bg-primary hover:bg-primary/90 text-white font-medium py-2.5 sm:py-3 px-4 rounded-lg shadow-md btn-hover flex items-center justify-center">
                    <i class="fa-solid fa-user-plus mr-2"></i>注册
                </button>
                
                <div class="text-center pt-3 sm:pt-4 border-t border-neutral-200">
                    <p class="text-neutral-600 text-sm">
                        已有账号？ <a href="login.html" class="text-primary hover:text-primary/80 font-medium transition-colors duration-200">
                            <i class="fa-solid fa-sign-in-alt mr-1"></i>去登录
                        </a>
                    </p>
                </div>
            </div>

        </div>
        
        <!-- 确认模态框 -->
        <div id="confirmModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300 modal">
            <div class="bg-white rounded-xl shadow-xl max-w-md w-full mx-4 transform scale-95 transition-transform duration-300 modal-content">
                <div class="p-6">
                    <div class="flex justify-between items-start mb-4">
                        <h2 class="text-xl font-bold text-neutral-900">确认注册信息</h2>
                        <button onclick="closeConfirmModal()" class="text-neutral-500 hover:text-neutral-700 transition-colors duration-200 close">
                            <i class="fa-solid fa-times text-xl"></i>
                        </button>
                    </div>
                    <p class="text-neutral-600 mb-6">你将要注册的信息如下：</p>
                    
                    <div class="space-y-3 mb-6 p-4 bg-neutral-100 rounded-lg">
                        <p class="flex items-center">
                            <span class="text-neutral-700 font-medium w-24">用户名：</span>
                            <span id="confirmUsername" class="text-neutral-900"></span>
                        </p>
                        <p class="flex items-center">
                            <span class="text-neutral-700 font-medium w-24">身份：</span>
                            <span id="confirmRole" class="text-neutral-900"></span>
                        </p>
                        <p class="flex items-center">
                            <span class="text-neutral-700 font-medium w-24">学工号：</span>
                            <span id="confirmStudentId" class="text-neutral-900"></span>
                        </p>
                        <p class="flex items-center">
                            <span class="text-neutral-700 font-medium w-24">邮箱</span>
                            <span id="confirmStudentEmail" class="text-neutral-900"></span>
                        </p>
                    </div>
                    
                    <div class="flex items-center text-danger text-sm mb-6">
                        <i class="fa-solid fa-exclamation-triangle mr-2"></i>
                        <span>请注意，身份和学号以及邮箱注册成功后不可修改。</span>
                    </div>
                    
                    <div class="flex space-x-3">
                        <button onclick="closeConfirmModal()" class="flex-1 bg-neutral-200 hover:bg-neutral-300 text-neutral-800 font-medium py-2.5 px-4 rounded-lg transition-colors duration-200">
                            取消
                        </button>
                        <button onclick="confirmRegister()" class="flex-1 bg-primary hover:bg-primary/90 text-white font-medium py-2.5 px-4 rounded-lg transition-colors duration-200">
                            <i class="fa-solid fa-check mr-2"></i>确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/register.js"></script>
    </div>
    <footer class="bg-dark text-white py-8 mt-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">用户注册</h3>
                    <p class="text-gray-400">您将在该页面完成注册操作。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系我们</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><i class="fa-solid fa-envelope mr-2"></i> softclass-platform@qq.com</li>
                        <li><i class="fa-solid fa-phone mr-2"></i> 114-514-1919-810</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weixin text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-weibo text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">
                            <i class="fa-brands fa-github text-xl"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 软课程管理平台 版权所有</p>
            </div>
        </div>
    </footer>
</body>
</html>